<template>
  <a-card class="patient-info-header mt-2">
    <div class="flex items-center">
      <div class="flex items-center">
        <a-avatar :size="48" :src="avatarMan" />
        <div class="flex ml-2">
          <div class="ml-4 flex flex-col justify-around">
            <div class="text-xl font-semibold w-[80px] truncate text-primary">{{ patientInfo?.brName || '姓名' }}</div>
            <div>
              <span class="mr-4">{{ patientInfo?.brXb || '性别' }}</span>
              <span class="">{{ patientInfo?.brAge ? patientInfo?.brAge : '年龄' }}</span>
            </div>
          </div>
          <div class="ml-4 flex flex-col justify-around">
            <div><PhoneOutlined class="mr-2" />{{ patientInfo?.brMob || '手机号' }}</div>
            <div class="w-[200px] truncate"><EnvironmentOutlined class="mr-2" />{{ patientInfo?.brGzdw || '工作单位' }}</div>
          </div>
        </div>
      </div>
      <div class="flex items-center ml-8">
        <div class="flex mr-6">
          <LabelValue label="信息卡号" tooltip :width="170" :value="patientInfo?.brId" />
        </div>
        <div class="flex mr-6">
          <LabelValue label="科室名称" tooltip :width="140" :value="patientInfo?.ksmc" />
        </div>
        <div class="flex">
          <LabelValue label="医生" tooltip :width="140" :value="patientInfo?.empName" />
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup>
import { EnvironmentOutlined, PhoneOutlined } from '@ant-design/icons-vue'
import avatarMan from '@/assets/images/avatar-man.png'
import LabelValue from '@/components/LabelValue'

defineProps({
  patientInfo: {
    type: Object,
    default: () => ({})
  }
})
</script>
<style lang="less" scoped>
.patient-info-header {
  background-color: var(--secondary-color);
  :deep(.ant-badge-count) {
    top: auto;
    right: 6px;
    bottom: 0;
    background-color: var(--primary-color);
    box-shadow: none;
  }
}
</style>
